<template>
  <div class="main account-pool-container" direction="column" align="stretch">
    <div class="body">
      <el-table
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark popper_sty"
      >
        <el-table-column prop="poolName" label="账单池名称" align="center">
        </el-table-column>
        <el-table-column prop="memberDeptName" label="所属部门" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="changeMark(scope.row.memberDeptName)"
              placement="top"
              popper-class="popper_sty"
              v-if="
                scope.row.memberDeptName && scope.row.memberDeptName.length > 10
              "
            >
              <span class="one-line"> {{ scope.row.memberDeptName }}</span>
            </el-tooltip>
            <span v-else>{{ scope.row.memberDeptName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="adminUserName" label="所属管理员" align="center">
        </el-table-column>
        <el-table-column prop="memberUserName" label="分配权限" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="changeMark(scope.row.memberUserName)"
              placement="top"
              popper-class="popper_sty"
              v-if="
                scope.row.memberUserName && scope.row.memberUserName.length > 10
              "
            >
              <span class="one-line"> {{ scope.row.memberUserName }}</span>
            </el-tooltip>
            <span v-else>{{ scope.row.memberUserName }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="poolName" label="创建人" align="center">
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="editPool(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :pager-count="5"
          :total="total"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </div>
    <createPool
      :loading="loading"
      :dialogTitle="dialogTitle"
      v-if="createPoolDialog"
      :memberDeptId="memberDeptId"
      :memberDeptName="memberDeptName"
      @handleClose="handleClose"
      @dialogSubmit="dialogSubmit"
      v-model="poolForm"
      type="1"
    ></createPool>
  </div>
</template>
<script>
import { poolListApi } from "@/api/admin/accountPool.js";
import createPool from "../components/createPool.vue";
export default {
  components: {
    createPool,
  },
  data() {
    return {
      loading: false,
      createPoolDialog: false,
      dialogTitle: "",
      tableData: [],
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 60, 100],
      total: 0,
      poolForm: {},
      memberDeptId: "",
      memberDeptName: "",
    };
  },
  created() {
    this.getPoolList();
  },
  methods: {
    /**
     * 账单池-关闭弹框
     */
    handleClose() {
      this.createPoolDialog = false;
    },
    /**
     * 账单池-提交弹框数据
     */
    dialogSubmit() {
      this.getPoolList();
      this.createPoolDialog = false;
    },
    /**
     * 编辑账单池
     */
    editPool(row) {
      let memberUserId = JSON.parse(JSON.stringify(row.memberUserId)).split(
        ","
      );
      this.memberDeptId = JSON.parse(JSON.stringify(row.memberDeptId));
      this.memberDeptName = JSON.parse(JSON.stringify(row.memberDeptName));
      this.poolForm = {
        orderPoolId: row.orderPoolId,
        poolName: row.poolName,
        adminUserId: Number(row.adminUserId),
        memberDeptId: row.memberDeptId,
        memberDeptName: row.memberDeptName,
        memberUserId: memberUserId.map((item) => Number(item)),
        adminUserName: row.adminUserName,
      };
      this.dialogTitle = "编辑账单池";
      this.createPoolDialog = true;
    },
    /**
     * 账单池-列表
     */
    getPoolList() {
      poolListApi({
        page: this.currentPage,
        limit: this.pageSize,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  font-family: Microsoft YaHei;
  width: 100%;
  background: #fff;
}

.body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: white;
  border-radius: $xr-border-radius-base;
  position: relative;
}
.account-pool-container {
  .create_btn {
    float: right;
    margin-bottom: 15px;
  }
}
</style>